<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
  <link rel="stylesheet" href="../style/css/bootstrap.min.css">
  <link rel="stylesheet" href="../style/css/common.css">
</head>

<body>
  <div class="container">
    <ul class="nav nav-tabs mb20">
      <li><a href="save.html">存储数据库</a></li>
      <li class="active"><a href="compareFeature.html">特征码比对</a></li>
      <li><a href="searchFaces.html">数据库查找</a></li>
      <li><a href="imgList.html">数据库图像预览</a></li>
      <li><a href="../index.html">返回首页</a></li>
    </ul>
    <div class="panel panel-primary">
      <div class="panel-heading">步骤一：对图像进行人脸检测并提取特征码</div>
      <div class="panel-body">
        <div class="tips">
          <p>调用的接口：detectAndAddFeatures</p>
          <p>接口参数：imgData（照片的二进制流文件）, faceNum（默认值0）</p>
          <p>举例：client.detectAndAddFeatures(imgBlob, 0, function (data) {})</p>
        </div>
        <div class="div-upload">
          <div class="div-btn">
            <button type="button" class="btn btn-primary">上传照片</button>
            <button type="button" class="btn btn-primary submit">保存数据</button>
          </div>
          <input type="file" onchange="previewImage(this)" class="btn-file" />
          <div class="preview wid300"><img src="../style/images/icon1.png" alt="" /></div>
          <div class="mt20 md5_div none">图像Md5校验码：<em></em></div>
        </div>
      </div>
    </div>

    <div class="panel panel-primary">
      <div class="panel-heading">步骤二：根据图像的md5校验码查找数据库中属于该图像的唯一人脸特征数据库对象</div>
      <div class="panel-body">
        <div class="tips">
          <p>调用的接口：getFeatureByImageMd5</p>
          <p>接口参数：imageMd5（图像的md5）</p>
          <p>举例：client.getFeatureByImageMd5(imageMd5, function (data) {})</p>
        </div>
        <div class="div-upload">
          <button type="button" class="btn btn-primary getCodeBtn">获取特征</button>
          <span class="code_div none">图像特征：<em></em></span>
        </div>
      </div>
    </div>

    <div class="panel panel-primary">
      <div class="panel-heading">步骤三：对图像数据进行人脸检测并提取特征码，然后与数据库中指定的特征码相比，返回人脸特征数据及相似度结果</div>
      <div class="panel-body">
        <div class="tips">
          <p>调用的接口：detectAndCompareFaces</p>
          <p>接口参数：featureId（步骤二获取到的数据库特征码），imgData（图像的二进制文件流），faceNum（默认是0）</p>
          <p>举例：client.detectAndCompareFaces(featureId, imgBlob, 0, function (data) {})</p>
        </div>
        <div class="div-upload">
          <div class="div-btn">
            <button type="button" class="btn btn-primary">上传照片</button>
            <button type="button" class="btn btn-primary compareBtn">点击对比</button>
          </div>
          <input type="file" onchange="previewImage(this)" class="btn-file" />
          <div class="preview wid300" id="viewDiv"><img src="../style/images/icon1.png" alt="" /></div>
        </div>
      </div>
    </div>
    
    <!-- 提示语 -->
    <div class="box">
      <div class="msg">提示成功</div>
    </div>
  </div>
  <script src="../style/js/jquery.min.js"></script>
  <script src="../style/js/bootstrap.min.js"></script>
  <script src="config/thrift.js"></script>
  <script src="config/FaceDb.js"></script>
  <script src="config/FaceDb_types.js"></script>
  <script src="config/common.js"></script>
  <script src="js/preview.js"></script>
  <script>
    imageMd5 = '';   //全局定义图像Md5
    featureId = '';
    // 提交到数据库，并获取图像信息
    $('.submit').click(function () {
      client.detectAndAddFeatures(imgBlob, 0, function (data) {
        console.log(data)
        $('.box').show().delay(3000).fadeOut();
        $('.box').find('.msg').text('保存成功');
        imageMd5 = data.md5;
        $('.md5_div').show();
        $('.md5_div>em').text(imageMd5);
      }).fail(function (error) {
        $('.box').show().delay(3000).fadeOut();
        $('.box').find('.msg').text(error.responseText);
        console.log(error)
      })
    })


    // 获取该图像的人脸特征
    $('.getCodeBtn').click(function () {
      client.getFeatureByImageMd5(imageMd5, function (data) {
        console.log(data)
        featureId = data.md5;
        $('.code_div').show();
        $('.code_div>em').text(featureId);
        $('.box').show().delay(3000).fadeOut();
        $('.box').find('.msg').text('获取成功');
      }).fail(function (error) {
        $('.box').show().delay(3000).fadeOut();
        $('.box').find('.msg').text(error.responseText);
        console.log(error)
      })
    })
    

    // 人脸对比
    $('.compareBtn').click(function () {
      client.detectAndCompareFaces(featureId,imgBlob,0,function(data) {
        console.log(data)
        var result = data.similartys;
        var codesRe = data.codes
        var perceArr = [];  //保存遍历出来的百分比
        var codesArr = [];  //保存遍历出来的人脸位置信息
        var newArr = [];    //定义一个新数组
        for(var i=0; i<result.length; i++){
          var num = result[i].toFixed(4);
          perceArr.push({ "pre": num })
        }
        for(var j=0; j<codesRe.length; j++){
          var pos = codesRe[j].pos;
          codesArr.push({ "pos": pos })
        }

        // 得到所有内容的新数组
        newArr = codesArr.map((item, index) => {
          return { ...item, ...perceArr[index] };
        });


        // 赋值
        imgViewWid = $('#viewDiv img').width();
        imgViewHei = $('#viewDiv img').height();


        var preceWid = imgViewWid / imgNatWid; // 图像在页面上显示的宽度除以实际宽度
        var preceHei = imgViewHei / imgNatHei; // 同上（高度）


        newArr.forEach(value => {
          var pos = value.pos;
          var html = '<div class="drawDiv" style="left:' + pos.left * preceWid + 'px;top:' + pos.top * preceHei + 'px;width:' + pos.width * preceWid + 'px;height:' + pos.height * preceHei + 'px;"><p>' + value.pre + '</p></div>'

          // 加入
          $('#viewDiv').append(html);
        })
      }).fail(function(error) {
        $('.box').show().delay(3000).fadeOut();
        $('.box').find('.msg').text(error.responseText);
      })
    })
  </script>
</body>

</html>